<template>
  <section v-loading="loading" class="cms-body">
    <div class="cms-list-header flex-between">
      <div>
        <el-select @change="goQuery" clearable placeholder="话题问题" v-model="params.problemId">
          <el-option v-for="item in problemList" :key="item.problemId" :label="item.problemName"
                     :value="item.problemId">
          </el-option>
        </el-select>
        <el-select v-model="params.problemStatus" @change="goQuery()">
          <el-option label="问题状态" value=""></el-option>
          <el-option label="未审核" value="0"></el-option>
          <el-option label="已审核" value="1"></el-option>
          <el-option label="已回复" value="2"></el-option>
        </el-select>
        <cms-input label="问题" v-model="params.text"></cms-input>
        <el-button @click="goQuery()">查询</el-button>
      </div>
    </div>
    <el-table :data="tableData" stripe style="width: 100%" @selection-change="checkIds">
      <el-table-column type="selection" width="35" align="right"></el-table-column>
      <el-table-column prop="id" label="id" width="80" align="center"></el-table-column>
      <el-table-column prop="nickName" label="昵称" width="95" align="center">
        <div slot-scope="scope">
          <p style="color: #FFA500" @click="routerLink('/appUser/pageList','pageList',scope.row.commentUserId)">
            {{scope.row.nickName}}</p>
        </div>
      </el-table-column>
      <el-table-column prop="problemName" label="话题问题" align="left"></el-table-column>
      <el-table-column prop="text" label="问题" align="center">
        <div slot-scope="scope">
          <span>{{scope.row.text|problemTextNumFilter}}</span>
        </div>
      </el-table-column>
      <el-table-column prop="reply" label="回复" align="center"></el-table-column>
      <el-table-column prop="remark" label="原因" align="center"></el-table-column>
      <el-table-column prop="isDisabled" label="审核状态" align="center" width="180">
        <div slot-scope="scope">
          <span v-if="scope.row.isChecked==0">待审核</span>
          <span v-if="scope.row.isChecked==1">审核通过</span>
          <span v-if="scope.row.isChecked==2">审核不通过</span>
        </div>
      </el-table-column>
      <el-table-column prop="checkTime" label="审核日期" align="center"></el-table-column>
      <el-table-column prop="createTime" label="创建日期" align="center"></el-table-column>
      <!--操作 -->
      <el-table-column label="操作" align="center" width="70">
        <div slot-scope="scope">
          <cms-button type="icon-shenhe"
                      @click.native="showUserProblemCheck(scope.row.id,scope.row.isChecked,scope.row.text,scope.row.remark)"
                      v-perms="'/userProblem/check'"></cms-button>
          <a href="javascript:void(0)"
             class="cms-table-button el-icon-chat-dot-square"
             title="回复" @click="showReply(scope.row.id,scope.row.isChecked,scope.row.text,scope.row.reply)"
             v-perms="'/userProblem/reply'">
          </a>
          <cms-button type="delete" @click.native="deleteBatch($api.commentRemove,scope.row.id)"
                      v-perms="'/userProblem/delete'"></cms-button>
          <cms-button type="view" @click.native="lookComments(scope.row.id);"
                      v-perms="'/userProblem/look'"></cms-button>
        </div>
      </el-table-column>
    </el-table>
    <!-- 表格底部 -->
    <div class="cms-list-footer">
      <div class="cms-left">
        <el-button :disabled="disabled" @click="deleteBatch($api.commentRemove,ids)" v-perms="'/userProblem/delete'">
          批量删除
        </el-button>
      </div>
      <!-- cms分页组件 -->
      <cms-pagination :total="total" @change="getPages"></cms-pagination>
    </div>

    <el-dialog :visible.sync="isShowCheck" title="问题审核">
      <el-form ref="checkForm" :model="checkInfo" :rules="checkRule" label-width="162px">
        <el-form-item label="问题Id" class="flex-100" prop="commentId">
          <el-input placeholder="问题Id" v-model="checkInfo.commentId" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="问题内容" class="flex-100" prop="questionText">
          <el-input type="textarea" placeholder="问题内容" v-model="checkInfo.questionText" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="当前状态" class="flex-100">
          <div slot-scope="scope">
            <span v-if="checkInfo.oldIsChecked==0">待审核</span>
            <span v-if="checkInfo.oldIsChecked==1">审核通过</span>
            <span v-if="checkInfo.oldIsChecked==2">审核不通过</span>
          </div>
        </el-form-item>
        <el-form-item label="审核状态" class="flex-100" prop="isChecked">
          <el-radio-group v-model="checkInfo.isChecked" :disabled="checkInfo.oldIsChecked!=0">
            <el-radio :label="1">审核通过</el-radio>
            <el-radio :label="2">审核不通过</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="原因" class="flex-100" v-if="checkInfo.isChecked==2" prop="remark">
          <el-input type="text" :rows="15" placeholder="请输入原因" v-model="checkInfo.remark"
                    :disabled="checkInfo.oldIsChecked!=0"></el-input>
        </el-form-item>
      </el-form>
      <div style="text-align: center">
        <el-button type="primary" @click="goCheckUserProblem(checkInfo)" v-if="checkInfo.oldIsChecked==0">审核</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="isShowReply" title="问题回复">
      <el-form ref="replyForm" :model="replyInfo" :rules="replyRule" label-width="162px">
        <el-form-item label="问题Id" class="flex-100" prop="commentId">
          <el-input placeholder="问题Id" v-model="replyInfo.commentId" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="问题内容" class="flex-100" prop="questionText">
          <el-input placeholder="问题内容" v-model="replyInfo.questionText" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="审核状态" class="flex-100" prop="isChecked">
          <spn></spn>
          <el-radio-group v-model="replyInfo.isChecked" :disabled="true">
            <el-radio :label="1">审核通过</el-radio>
            <el-radio :label="2">审核不通过</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="回复内容" class="flex-100" prop="replyText">
          <el-input type="textarea" :rows="15" placeholder="请输入内容" v-model="replyInfo.replyText"></el-input>
        </el-form-item>
      </el-form>
      <div style="text-align: center">
        <el-button type="primary" @click="goReply(replyInfo)">回复用户问题</el-button>
      </div>
    </el-dialog>

    <el-drawer title="用户跟帖" :visible.sync="commentsTable" direction="rtl" size="60%">
      <el-table :data="drawerTableData" stripe @selection-change="checkIdsAndStatus" v-loading="loading">
        <el-table-column prop="id" label="id" width="150" align="center"></el-table-column>
        <el-table-column prop="nickName" label="昵称" width="150" align="center"></el-table-column>
        <el-table-column prop="reply" label="跟帖内容" width="250" align="center"></el-table-column>
        <el-table-column prop="isChecked" label="审核状态" align="center" width="180">
          <div slot-scope="scope">
            <span v-if="scope.row.isChecked==0">待审核</span>
            <span v-if="scope.row.isChecked==1">审核通过</span>
            <span v-if="scope.row.isChecked==2">审核不通过</span>
          </div>
        </el-table-column>
        <el-table-column prop="createTime" label="跟帖日期" width="150" align="center"></el-table-column>
        <!--操作 -->
        <el-table-column label="操作" align="center" width="150">
          <div slot-scope="scope">
            <cms-button type="icon-shenhe"
                        @click.native="showCheck(scope.row.id,scope.row.targetId,scope.row.isChecked,scope.row.reply)"
                        v-perms="'/userProblem/commentsCheck'"></cms-button>
            <cms-button type="delete" @click.native="drawerDeleteBatch($api.commentRemove,scope.row.id)"
                        v-perms="'/userProblem/commentsDelete'"></cms-button>
          </div>
        </el-table-column>
      </el-table>
      <div class="cms-list-footer" style="padding-bottom:100px;">
        <div class="cms-left"></div>
        <cms-pagination :total="drawerTotal" @change="getDrawerPages"></cms-pagination>
      </div>
      <el-dialog :visible.sync="isShowCheckReply" style="margin-left: 300px">
        <el-form ref="form" :model="checkReplyInfo" label-width="162px">
          <el-form-item label="跟帖Id" class="flex-100" prop="commentId">
            <el-input placeholder="跟帖Id" v-model="checkReplyInfo.commentId" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="跟帖内容" class="flex-100" prop="replyText">
            <el-input placeholder="跟帖内容" v-model="checkReplyInfo.replyText" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="审核状态" class="flex-100" prop="isChecked">
            <el-radio-group v-model="checkReplyInfo.isChecked">
              <el-radio :label="0">待审核</el-radio>
              <el-radio :label="1">审核通过</el-radio>
              <el-radio :label="2">审核不通过</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <div style="text-align: center">
          <el-button type="primary" @click="goCheckReply(checkReplyInfo)" v-perms="'/userProblem/commentsCheck'">跟帖审核
          </el-button>
        </div>
      </el-dialog>
    </el-drawer>

  </section>
</template>

<script>
  import listMixins from '@/mixins/list'
  import drawerListMixins from '@/mixins/drawerList'
  import axios from "axios/index";
  import va from "@/rules";

  export default {
    mixins: [listMixins, drawerListMixins],
    data() {
      let required = va.required("此项必填");
      return {
        commentsTable: false,
        params: {//请求参数
          pageNo: 1,
          pageSize: 10,
          isDisplay: '',
          problemName: '',
          problemId: '',
          problemStatus: '',
        },
        replyRule: {
          remark: [required],
          replyText: [required],
        },
        checkRule: {},
        param: {},
        isShow: false,
        tableHeight: 500,
        isShowReply: false,
        isShowCheck: false,
        isShowCheckReply: false,//跟帖
        replyInfo: {
          isChecked: 0,
          problemId: '',
          questionText: '',
          replyText: '',
          commentId: '',
          remark: ''
        },
        checkInfo: {
          oldIsChecked: 0,
          isChecked: 0,
          problemId: '',
          questionText: '',
          commentId: '',
          remark: ''
        },
        checkReplyInfo: {
          commentId: '',
          targetId: '',
          isChecked: '',
          replyText: ''
        },
        problemList: []

      }
    },
    methods: {
      goQuery() {
        this.getTableData(this.params);
      },
      getProblemData() {
        let api = this.$api; //API地址
        axios.all([axios.post(api.problemList),]).then(axios.spread((problemRes) => {
          this.problemList = problemRes.body;
        })).catch(error => {
          console.log(error);
        });
      },
      showUserProblemCheck(commentId, isChecked, text, remark) {
        //用户问题审核
        this.checkInfo.commentId = commentId;
        this.checkInfo.isChecked = isChecked;
        this.checkInfo.oldIsChecked = isChecked;
        this.checkInfo.questionText = text;
        this.checkInfo.remark = remark;
        this.isShowCheck = true;
      },
      goCheckUserProblem(checkInfo) {
        //用户问题审核
        let form = this.$refs['checkForm'];
        form.validate((valid) => {//验证方法
          if (valid) {
            this.$http.post(this.$api.commentUserProblemChecked, checkInfo).then(res => {
              if (res.code == "200") {
                this.successMessage('操作成功');
                this.isShowCheck = false;
                this.getTableData(this.params);
              }
            });
          }
        })
      },
      showReply(commentId, isChecked, questionText, replyText) {
        if (isChecked == 0) {
          this.errorMessage("请先审核");
        } else if (isChecked == 2) {
          this.errorMessage("审核通过的才能进行回复");
        } else {
          this.isShowReply = true;
          this.replyInfo.commentId = commentId;
          if (isChecked == 0) {
            this.replyInfo.isChecked = 1;
          } else {
            this.replyInfo.isChecked = isChecked;
          }
          this.replyInfo.questionText = questionText;
          this.replyInfo.replyText = replyText;
        }
      },
      goReply(params) {
        let form = this.$refs['replyForm'];
        form.validate((valid) => {//验证方法
          if (valid) {
            this.$http.post(this.$api.userProblemReply, params).then(res => {
              if (res.code == "200") {
                this.successMessage('操作成功');
                this.isShowReply = false;
                this.getTableData(this.params);
              }
            });
          }
        })
      },
      lookComments(commentId) {
        this.commentsTable = true;
        let params = {targetId: commentId, targetEntity: "JcComment"}
        this.initDrawerTableData(this.$api.userProblemPageList, params) //请求列表
      },
      showCheck(id,targetId,isChecked,reply){
        this.checkReplyInfo.commentId=id;
        this.checkReplyInfo.targetId=targetId;
        this.checkReplyInfo.isChecked=isChecked;
        this.checkReplyInfo.replyText=reply;
        this.isShowCheckReply=true;
      },
      goCheckReply(params) {
        this.$http.post(this.$api.checkUserProblemReply, {ids: params.commentId, isChecked: params.isChecked}).then(res => {
          if (res.code == "200") {
            this.isShowCheckReply=false;
            this.successMessage('操作成功');
            this.getDrawerTableData({targetId: params.targetId, targetEntity: "JcComment"}) //请求列表
          }
        });

      },
      checkBatch(url, ids, isChecked) {
        this.$confirm('是否确定审核？', '警告', {type: "error"}).then(mes => {
          this.$http.post(url, {ids: ids, isChecked: isChecked}).then(res => {
            if (res.code == "200") {
              this.successMessage('操作成功');
              this.getTableData(this.params);
            }
          });
        })
      }
    },
    created() {
      this.getProblemData();
      this.params.targetEntity = 'JcProblem';
      this.initTableData(this.$api.userProblemPageList, this.params) //请求列表
    },
    mounted() {
      let clientHeight = document.body.clientHeight
      $('.cms-body').css('minHeight', clientHeight - 110 + 'px')
    }
  }
</script>

<style>

  .bread-box label {
    color: #5a5e66;
    font-size: 14px;
  }

  .bread-items a {
    color: #1276c3;
    font-size: 14px;
  }

  .bread-items a::after {
    content: '/';
    padding: 0 5px;
    color: #1276c3;
  }

  .bread-items:last-child a::after {
    content: '';
    padding: 0 5px;
    color: #1276c3;
  }

</style>
